import React from 'react'
import {useDispatch,useSelector} from "react-redux"
import routerConfig from '../router'
import axios from "axios"
import {useEffect} from "react"
import {Suspense} from "react" // 路由加载前的loading
import {useRoutes} from "react-router-dom" // useRoutes可以根据router下的index.js 自动生成路由
// 相当于vue得routerView标签
function App() {
  let store = useSelector((state)=>{
        console.log(state,"我在组里访问了仓库得数据");
        return {
          ...state.shopReducer
        }
  })
  let dispatch = useDispatch()
  let fn = () =>{
    dispatch({type:"bbb",payload:"wangwu"})
  }
  console.log(store);
  let getList = ()=>{
    axios.get("https://baojia.chelun.com/v2-car-getMasterBrandList.html").then(res=>{
       // res.data.data 是咱们要的数据
        dispatch({type:"ccc",payload:res.data.data})
    })
  }
  useEffect(()=>{
   
      getList()
  },[])
  return (
    
    <Suspense fallback={<>...加载中</>}>
        {/* <button onClick={()=>{fn}}>点我我触发atcion</button> */}
        {/* <div>{store.name}</div>
        {
          store.arr && store.arr.length ? store.arr.map((item,index)=>{
                return <div key={index}>{item.Name}</div>
          }):"暂无数据"
        } */}
    
        {
            useRoutes(routerConfig)
        }
    </Suspense>
  )
}

export default App
